<template>
  <view class="container">
    <!-- <view class="search d-rn d-ac">
			<image src="../../static/img/search.png" mode=""></image>
			<input type="text" placeholder="请输入搜索关键词" placeholder-style="color:#CCCCCC;">
		</view> -->
    <!-- <view class="content">
			<view class="content-tab d-rn d-ac d-ja">
				<view class="content-tab-one d-cw d-ac d-jc" v-for="(item,index) in 2" :key="index" @click="handleNav(index)">
					<text :class="navSts == index?'active':'outactive'">{{!index?'待审批':'已审批'}}</text>
					<text v-if="navSts == index"></text>
				</view>
			</view>
			<view class="content-select d-rn d-ac d-jb">
				<view class="content-select-one d-rn d-ac d-jc">
					<picker @change="bindPickerChange" :range="hostList"range-key="name" class="picker">
						<view class="d-rn d-ac d-jc">
							<view class="picker-con d-cn d-jc d-ac">
								<view class="uni-input one-txt-cut" v-if="type.typeName">{{type.typeName}}
								</view>
								<view class="uni-input one-txt-cut" v-else>全部状态</view>
							</view>
							<image src="../../static/img/bottom.png" mode="" class="bottom"></image>
						</view>
					</picker>
					
				</view>
				<view class="content-select-shu">
					|
				</view>
				<view class="content-select-one">
					<picker @change="bindPickerChange" :range="hostList" range-key="name" class="picker">
						<view class="d-rn d-ac d-jc">
							<view class="picker-con d-cn d-jc">
								<view class="uni-input one-txt-cut" v-if="type.typeName">{{type.typeName}}
								</view>
								<view class="uni-input one-txt-cut" v-else>全部类型</view>
							</view>
							<image src="../../static/img/bottom.png" mode="" class="bottom"></image>
						</view>
					</picker>
				</view>
				<view class="content-select-shu">
					|
				</view>
				<view class="content-select-one d-rn d-ac d-jc">
					<view class="content-top-one-right d-rn d-ac" @click="handleOpenTime">
						<text>{{updateTime}}</text>
						<image src="../../static/img/bottom.png" mode="" class="bottom"></image>
					</view>
				</view>
			</view>
		</view> -->

    <view class="form">
      <view class="form-one d-rn d-ac d-jb">
        <text class="text">{{ $t('initiator') }}</text>
        <text class="text2">
          <span v-if="info.employerName">{{ info.employerName }}</span>
          <span v-if="info.positionName">{{ info.positionName }}</span><span
            v-if="info.positionName && info.employerDeptName">/</span><span v-if="info.employerDeptName">{{
            info.employerDeptName }}</span>
        </text>
      </view>
      <view class="form-one d-rn d-ac d-jb">
        <text class="text">{{ $t('type') }}</text>
        <text class="text">{{ info.typeName }}</text>
      </view>
      <template v-if="info.type == 3">
        <view class="form-one d-rn d-ac d-jb" v-if="info.attendanceCardDTO.punchDate">
          <text class="text">{{$t('reissue_card_time')}}：</text>
          <text class="text">{{ info.attendanceCardDTO.punchDate }}</text>
        </view>
        <view class="form-one d-rn d-ac d-jb" v-if="info.attendanceCardDTO.punchForm">
          <text class="text">{{$t('reissue_card_type')}}：</text>
          <text class="text">{{
            info.attendanceCardDTO.punchForm == 1 ? $t('clock_in_card') : $t('clock_out_card')
          }}</text>
        </view>
        <view class="form-one d-rn d-ac d-jb" v-if="info.attendanceCardDTO.punchTime">
          <text class="text">{{$t('modify_time1')}}：</text>
          <text class="text">{{ info.attendanceCardDTO.punchTime }}</text>
        </view>
        <view class="form-two" v-if="info.attendanceCardDTO.remark">
          <text class="text">{{$t('card_reason')}}：</text>
          <text class="text txt-cut">{{ info.attendanceCardDTO.remark }}</text>
        </view>
        <view class="form-two" v-if="info.attendanceCardDTO.pic">
          <text class="text">{{ $t('attachment') }}</text>
          <image v-if="info.attendanceCardDTO.pic" :src="info.attendanceCardDTO.pic" mode="widthFix"
            style="width: 100%"></image>
        </view>
      </template>
      <template v-if="info.type == 5">
        <view class="form-one d-rn d-ac d-jb" v-if="info.overtimeApplyDTO.createTime">
          <text class="text">{{$t('apply_time')}}：</text>
          <text class="text">{{ info.overtimeApplyDTO.createTime }}</text>
        </view>
        <view class="form-one d-rn d-ac d-jb" v-if="info.overtimeApplyDTO.duration">
          <text class="text">{{$t('overtime_hours')}}：</text>
          <text class="text">{{ info.overtimeApplyDTO.duration }}</text>
        </view>
        <view class="form-one d-rn d-ac d-jb" v-if="info.overtimeApplyDTO.duration">
          <text class="text">{{$t('application_duration')}}：</text>
          <text class="text">{{ info.overtimeApplyDTO.applyTime }}</text>
        </view>
        <view class="form-two" v-if="info.overtimeApplyDTO.remark">
          <text class="text">{{ $t('apply_reason') }}</text>
          <text class="text txt-cut">{{ info.overtimeApplyDTO.remark }}</text>
        </view>
        <view class="form-two" v-if="info.overtimeApplyDTO.pic">
          <text class="text">{{ $t('attachment') }}</text>
          <image v-if="info.overtimeApplyDTO.pic" :src="info.overtimeApplyDTO.pic" mode="widthFix" style="width: 100%">
          </image>
        </view>
      </template>
      <template v-if="info.type == 4">
        <view class="form-one d-rn d-ac d-jb" v-if="info.modifyPunchDTO.punchDate">
          <text class="text">{{$t('clock_in_date')}}：</text>
          <text class="text">{{ info.modifyPunchDTO.punchDate }}</text>
        </view>
        <view class="form-one d-rn d-ac d-jb" v-if="info.modifyPunchDTO.punchType">
          <text class="text">{{$t('clock_in_time')}}：</text>
          <text class="text">{{ info.modifyPunchDTO.punchTime }}</text>
        </view>
        <view class="form-one d-rn d-ac d-jb" v-if="info.modifyPunchDTO.changeTime">
          <text class="text">{{$t('modify_time1')}}：</text>
          <text class="text">{{ info.modifyPunchDTO.changeTime }}</text>
        </view>
        <view class="form-two" v-if="info.modifyPunchDTO.remark">
          <text class="text">{{ $t('modify_reason') }}</text>
          <text class="text txt-cut">{{ info.modifyPunchDTO.remark }}</text>
        </view>
        <view class="form-two" v-if="info.modifyPunchDTO.pic">
          <text class="text">{{ $t('attachment') }}</text>
          <image v-if="info.modifyPunchDTO.pic" :src="info.modifyPunchDTO.pic" mode="widthFix" style="width: 100%">
          </image>
        </view>
      </template>
      <template v-if="info.type == 1 || info.type == 2">
        <view class="form-one d-rn d-ac d-jb" v-if="info.jqEmployerLeaveDTO.leaveStartDate">
          <text class="text">{{ $t('start_time') }}</text>
          <text class="text">{{ info.jqEmployerLeaveDTO.leaveStartDate }}</text>
          <text style="margin-left: 10px;font-size:13px"
            v-if="info && info.jqEmployerLeaveDTO && (info.jqEmployerLeaveDTO.leaveStartDateType == 2 && info.jqEmployerLeaveDTO.leaveEndDateType == 2)">{{ $t('morning') }}</text>
          <text style="margin-left: 10px;font-size:13px"
            v-if="info && info.jqEmployerLeaveDTO && (info.jqEmployerLeaveDTO.leaveStartDateType == 2 && info.jqEmployerLeaveDTO.leaveEndDateType == 3)">{{ $t('morning') }}</text>
          <text style="margin-left: 10px;font-size:13px"
            v-if="info && info.jqEmployerLeaveDTO && (info.jqEmployerLeaveDTO.leaveStartDateType == 3 && info.jqEmployerLeaveDTO.leaveEndDateType == 3)">{{ $t('afternoon') }}</text>

        </view>
        <view class="form-one d-rn d-ac d-jb" v-if="info.jqEmployerLeaveDTO.leaveEndDate">
          <text class="text">{{ $t('end_time') }}</text>
          <text class="text">{{ info.jqEmployerLeaveDTO.leaveEndDate }}</text>
          <text style="margin-left: 10px;font-size:13px"
            v-if="info && info.jqEmployerLeaveDTO && (info.jqEmployerLeaveDTO.leaveStartDateType == 2 && info.jqEmployerLeaveDTO.leaveEndDateType == 2)">{{ $t('afternoon') }}</text>
          <text style="margin-left: 10px;font-size:13px"
            v-if="info && info.jqEmployerLeaveDTO && (info.jqEmployerLeaveDTO.leaveStartDateType == 3 && info.jqEmployerLeaveDTO.leaveEndDateType == 3)">{{ $t('afternoon') }}</text>
          <text style="margin-left: 10px;font-size:13px"
            v-if="info && info.jqEmployerLeaveDTO && (info.jqEmployerLeaveDTO.leaveStartDateType == 2 && info.jqEmployerLeaveDTO.leaveEndDateType == 3)">{{$t('afternoon')}}</text>


        </view>
        <view class="form-one d-rn d-ac d-jb" v-if="info.jqEmployerLeaveDTO.leaveDays">
          <text class="text">{{ $t('leave_duration') }}</text>
          <text class="text2">{{ info.jqEmployerLeaveDTO.leaveDays || 0 }}{{ $t('days') }}</text>
        </view>
        <view class="form-two" v-if="info.jqEmployerLeaveDTO.leaveReason">
          <text class="text">{{$t('leave_reason1') }}</text>
          <text class="text txt-cut">{{
            info.jqEmployerLeaveDTO.leaveReason
          }}</text>
        </view>
        <view class="form-two" v-if="info.jqEmployerLeaveDTO.leaveFile">
          <text class="text">{{ $t('attachment') }}</text>
          <image v-if="info.jqEmployerLeaveDTO.leaveFile" :src="info.jqEmployerLeaveDTO.leaveFile" mode="widthFix"
            style="width: 100%"></image>
        </view>
      </template>
      <view class="form-two">
        <!-- <text>(申请人可见)</text> -->
        <text>{{ $t('approval_remark') }} </text>
        
        <textarea :disabled="info.status > 1" name="" id="" cols="30" rows="10"
          :placeholder="info.status > 1 ? '' : $t('fieldClockIn_placeholder')" placeholder-style="color:#CCCCCC;" v-model="form.remark"
          maxlength="200" v-if="info.status < 2"></textarea>
        <text class="text " style="display: block;" v-else>{{
            info.remark
          }}</text>
      </view>
    </view>
    <view class="footer d-rn d-ac d-jc" v-if="info.reviewerType == 1">
      <text class="d-rn d-ac d-jc" @click="$u.debounce(handleSubmit(2), 500)" v-if="info.status == 0">{{ $t('reject') }}</text>
      <text class="d-rn d-ac d-jc" @click="$u.debounce(handleSubmit(1), 500)" v-if="info.status == 0">{{ $t('agree') }}</text>
    </view>
  </view>
</template>

<script>
var _self;
import { audit } from "../../api/index.js";
export default {
  data() {
    return {
      info: {},
      form: {
        remark: "",
        state: "",
        approvarId: "",
      },
      roleName: uni.getStorageSync("roleName"),
    };
  },
  onLoad(options) {
    _self = this;
    if (options && options.data) {
      _self.info = JSON.parse(options.data);
      _self.form.remark = _self.info.remark;
      console.log(_self.info);
      _self.form.approvarId = _self.info.id;
    }
  },
  methods: {
    handleSubmit(type) {
      if (type == 2) {
        uni.showModal({
          title: this.$t('prompt'),
          content: this.$t('reject_confirm'),
          success: (mode) => {
            if (mode.cancel) return;
            _self.form.state = type;
            let data = {
              remark: this.form.remark,
              approvalFormId: this.info.id,
              auditStatus: type,
            };
            audit(data).then((res) => {
              if (res.code == 200) {
                _self.$commonFun.showTips(res.msg);
                setTimeout(function () {
                  uni.navigateBack();
                }, 2000);
              }
            });
          },
        });
      } else {
        _self.form.state = type;
        let data = {
          remark: this.form.remark,
          approvalFormId: this.info.id,
          auditStatus: type,
        };
        uni.showModal({
          title: this.$t('prompt'),
          content: this.$t('approve_confirm'),
          success: (mode) => {
            if (mode.cancel) return;
            _self.form.state = type;
            let data = {
              remark: this.form.remark,
              approvalFormId: this.info.id,
              auditStatus: type,
            };
            audit(data).then((res) => {
              if (res.code == 200) {
                _self.$commonFun.showTips(res.msg);
                setTimeout(function () {
                  uni.navigateBack();
                }, 2000);
              }
            });
          },
        });

      }


    },

    // getformList(){
    // 	formList({
    // 		pageNum:_self.pageNum,
    // 		pageSize:_self.pageSize,
    // 	}).then(res=>{
    // 		if(res.code == 200){
    // 			_self.shenpiList = res.rows;
    // 			_self.total = res.total;
    // 		}
    // 	})
    // },
  },
};
</script>

<style lang="scss">
page {
  // background-color: #F5F5F5;
}

.container {
  width: 100%;

  .form {
    width: 100%;
    background-color: #ffffff;
    margin-top: 20rpx;

    &-one {
      padding: 25rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;

      .text {
        font-size: 28rpx;
        color: #6c6c6c;
      }

      .text2 {
        font-size: 28rpx;
      }

      .uni-input {
        font-size: 28rpx;
      }
    }

    &-two {
      padding: 25rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;

      text {
        font-size: 28rpx;
        color: #6c6c6c;
      }

      input {
        font-size: 28rpx;
        color: #cccccc;
        margin-top: 16rpx;
      }
    }
  }

  .list {
    width: 94%;
    margin: 24rpx auto;

    &-one {
      background-color: #ffffff;
      padding: 24rpx;
      box-sizing: border-box;
      margin-bottom: 24rpx;
      border-radius: 12rpx;

      &-one {
        &-title {
          margin-bottom: 16rpx;

          &-left {
            text:nth-of-type(1) {
              font-size: 36rpx;
              font-weight: bold;
              color: #333333;
              margin-right: 20rpx;
            }

            text:nth-of-type(2) {
              padding: 6rpx;
              box-sizing: border-box;
              font-size: 20rpx;
              font-weight: bold;
              color: #ff8f1f;
              background-color: #ffefdf;
              border-radius: 12rpx;
            }
          }

          &-right {
            text {
              color: #cccccc;
            }
          }
        }

        &-content {
          padding-bottom: 24rpx;
          border-bottom: 1px dashed #d2d2d2;

          text {
            margin-bottom: 10rpx;
            color: #999999;
          }
        }

        &-sts {
          padding-top: 24rpx;
          box-sizing: border-box;

          text {
            font-weight: bold;
          }

          .activetext {
            color: #ffffff;
          }
        }
      }
    }
  }

  .footer {
    width: 100%;
    background-color: #ffffff;
    margin: 24rpx 0;
    box-sizing: border-box;
    position: fixed;
    bottom: 0%;
    left: 0%;

    text {
      width: 339rpx;
      height: 86rpx;
    }

    text:nth-of-type(1) {
      background: #ffffff;
      border: 1px solid #e5e5e5;
      border-radius: 2em;
      margin-right: 24rpx;
    }

    text:nth-of-type(2) {
      background: #fade4e;
      border: 1px solid #fade4e;
      border-radius: 2em;
    }
  }
}
</style>
